import QtQuick
import QtQuick.Controls

Item {
    id: marker
    width: 30
    height: 30
    
    property string stationId: ""
    property string stationName: ""
    property string status: "normal"
    property double signalStrength: 0
    property int connectedUsers: 0
    property bool highlighted: false
    
    // 根据状态确定颜色
    property color markerColor: {
        switch(status) {
            case "normal": return "#27ae60"
            case "warning": return "#f39c12"
            case "critical": return "#e74c3c"
            case "offline": return "#95a5a6"
            default: return "#95a5a6"
        }
    }
    
    // 高亮外圈
    Rectangle {
        anchors.centerIn: parent
        width: highlighted ? 32 : 0
        height: highlighted ? 32 : 0
        radius: width / 2
        color: "transparent"
        border.color: "#3498db"
        border.width: 3
        opacity: highlighted ? 0.8 : 0
        
        Behavior on width { NumberAnimation { duration: 300 } }
        Behavior on height { NumberAnimation { duration: 300 } }
        Behavior on opacity { NumberAnimation { duration: 300 } }
        
        // 高亮时的脉冲动画
        SequentialAnimation on scale {
            running: highlighted
            loops: Animation.Infinite
            NumberAnimation { to: 1.2; duration: 800 }
            NumberAnimation { to: 1.0; duration: 800 }
        }
    }
    
    // 标记圆点
    Rectangle {
        id: dot
        anchors.centerIn: parent
        width: highlighted ? 20 : 16
        height: highlighted ? 20 : 16
        radius: width / 2
        color: markerColor
        border.color: "white"
        border.width: 2
        
        // 缩放动画行为
        Behavior on scale {
            NumberAnimation { duration: 200 }
        }
        
        Behavior on width { NumberAnimation { duration: 300 } }
        Behavior on height { NumberAnimation { duration: 300 } }
        
        // 异常时的闪烁动画
        SequentialAnimation on opacity {
            running: status === "critical"
            loops: Animation.Infinite
            NumberAnimation { to: 0.3; duration: 500 }
            NumberAnimation { to: 1.0; duration: 500 }
        }
        
        // 脉冲效果
        Rectangle {
            anchors.centerIn: parent
            width: parent.width
            height: parent.height
            radius: parent.radius
            color: "transparent"
            border.color: markerColor
            border.width: 2
            opacity: 0
            
            SequentialAnimation on width {
                running: status === "normal" || status === "warning"
                loops: Animation.Infinite
                NumberAnimation { to: 30; duration: 1500 }
                PauseAnimation { duration: 500 }
            }
            
            SequentialAnimation on height {
                running: status === "normal" || status === "warning"
                loops: Animation.Infinite
                NumberAnimation { to: 30; duration: 1500 }
                PauseAnimation { duration: 500 }
            }
            
            SequentialAnimation on opacity {
                running: status === "normal" || status === "warning"
                loops: Animation.Infinite
                NumberAnimation { from: 0.6; to: 0; duration: 1500 }
                PauseAnimation { duration: 500 }
            }
        }
    }
    
    // 鼠标悬停区域
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        
        onEntered: {
            tooltip.visible = true
            dot.scale = 1.5
        }
        
        onExited: {
            tooltip.visible = false
            dot.scale = 1.0
        }
        
        // 点击查看详情
        onClicked: {
            detailPopup.open()
        }
    }
    
    // 工具提示
    Rectangle {
        id: tooltip
        visible: false
        x: parent.width + 5
        y: -height / 2 + parent.height / 2
        width: tooltipText.width + 20
        height: tooltipText.height + 16
        color: "#2c3e50"
        radius: 5
        opacity: 0.95
        z: 100
        
        Text {
            id: tooltipText
            anchors.centerIn: parent
            text: stationId + "\n信号: " + signalStrength.toFixed(1) + "%"
            color: "white"
            font.pixelSize: 11
        }
        
        // 箭头
        Canvas {
            x: -8
            y: parent.height / 2 - 4
            width: 8
            height: 8
            onPaint: {
                var ctx = getContext("2d")
                ctx.fillStyle = "#2c3e50"
                ctx.beginPath()
                ctx.moveTo(8, 4)
                ctx.lineTo(0, 0)
                ctx.lineTo(0, 8)
                ctx.closePath()
                ctx.fill()
            }
        }
    }
    
    // 详情弹窗
    Popup {
        id: detailPopup
        x: parent.width / 2 - width / 2
        y: parent.height / 2 - height / 2
        width: 300
        height: 250
        modal: true
        focus: true
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
        
        background: Rectangle {
            color: "white"
            radius: 10
            border.color: markerColor
            border.width: 2
        }
        
        Column {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 15
            
            Text {
                text: stationName
                font.pixelSize: 18
                font.bold: true
                color: "#2c3e50"
                width: parent.width
                wrapMode: Text.WordWrap
            }
            
            Rectangle {
                width: parent.width
                height: 1
                color: "#e0e0e0"
            }
            
            Grid {
                columns: 2
                columnSpacing: 20
                rowSpacing: 10
                width: parent.width
                
                Text { text: "基站ID:"; color: "#7f8c8d"; font.pixelSize: 13 }
                Text { text: stationId; color: "#2c3e50"; font.pixelSize: 13; font.bold: true }
                
                Text { text: "状态:"; color: "#7f8c8d"; font.pixelSize: 13 }
                Text { 
                    text: {
                        switch(status) {
                            case "normal": return "正常"
                            case "warning": return "警告"
                            case "critical": return "严重"
                            case "offline": return "离线"
                            default: return "未知"
                        }
                    }
                    color: markerColor
                    font.pixelSize: 13
                    font.bold: true
                }
                
                Text { text: "信号强度:"; color: "#7f8c8d"; font.pixelSize: 13 }
                Text { text: signalStrength.toFixed(1) + "%"; color: "#2c3e50"; font.pixelSize: 13; font.bold: true }
                
                Text { text: "连接用户:"; color: "#7f8c8d"; font.pixelSize: 13 }
                Text { text: connectedUsers + " 人"; color: "#2c3e50"; font.pixelSize: 13; font.bold: true }
            }
            
            Item { height: 10 }
            
            Button {
                text: "关闭"
                anchors.horizontalCenter: parent.horizontalCenter
                onClicked: detailPopup.close()
                
                background: Rectangle {
                    color: parent.pressed ? "#2c3e50" : parent.hovered ? "#34495e" : "#3498db"
                    radius: 5
                }
                
                contentItem: Text {
                    text: parent.text
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
    }
}

